Code Playground

<div class="bubbles">
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
            <title>heart22</title>
            <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
        </svg></div>
</div>

body {
  height: 100%;
  width: 100%;
  background: white;
  overflow: hidden;
}

.container {
  display: None;
  width: 100px;
  height: 300px;
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
  bottom: 0;
  margin: auto;
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}
.container div {
  position: absolute;
}
.container .glass {
  height: 420px;
  width: 250px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  -moz-border-radius: 300px 300px 0px 0px;
  -webkit-border-radius: 300px;
  border-radius: 300px 300px 0px 0px;
  left: -80px;
  top: -100px;
  border-bottom: 15px solid rgba(255, 255, 255, 0.5);
}
.container .glass:after {
  width: 8px;
  background: rgba(255, 255, 255, 0.28);
  content: '';
  position: absolute;
  height: 80px;
  top: 430px;
  border-radius: 100px;
  left: 10px;
  top: 180px;
}
.container .glass:before {
  width: 8px;
  background: rgba(255, 255, 255, 0.28);
  content: '';
  position: absolute;
  height: 15px;
  top: 430px;
  border-radius: 100px;
  left: 10px;
  top: 280px;
}
.container .glow {
  position: absolute;
  width: 170px;
  height: 170px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  border: 1px solid rgba(245, 148, 184, 0.47);
  box-shadow: 0px 0px 10px #f594b8;
  left: -40px;
  top: -40px;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -moz-animation: glowing 2.5s ease-in-out infinite;
  -webkit-animation: glowing 2.5s ease-in-out infinite;
  animation: glowing 2.5s ease-in-out infinite;
}
.container .rose-petals > div {
  background: #d52d58;
  width: 45px;
  height: 80px;
  position: absolute;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.container .rose-petals > div:nth-child(1) {
  border-radius: 15px;
  left: 20px;
  top: -6px;
  background: #d52d58;
}
.container .rose-petals > div:nth-child(2), .container .rose-petals > div:nth-child(4), .container .rose-petals > div:nth-child(6) {
  border-radius: 0px 30px 0px 30px;
  background: #b81b43;
  left: 0;
  transform-origin: bottom right;
}
.container .rose-petals > div:nth-child(3), .container .rose-petals > div:nth-child(5), .container .rose-petals > div:nth-child(7) {
  border-radius: 30px 0px 30px 0px;
  left: 40px;
  transform-origin: bottom left;
}
.container .rose-petals > div:nth-child(2) {
  -moz-animation: openRose2 3s ease-in-out;
  -webkit-animation: openRose2 3s ease-in-out;
  animation: openRose2 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 5;
  background: #9e183a;
  top: 10px;
  height: 70px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-petals > div:nth-child(3) {
  -moz-animation: openRose3 3s ease-in-out;
  -webkit-animation: openRose3 3s ease-in-out;
  animation: openRose3 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 4;
  background: #9e183a;
  top: 10px;
  height: 70px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-petals > div:nth-child(4) {
  -moz-animation: openRose4 3s ease-in-out;
  -webkit-animation: openRose4 3s ease-in-out;
  animation: openRose4 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 3;
  background: #b81b43;
  top: 5px;
  height: 75px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-petals > div:nth-child(5) {
  -moz-animation: openRose5 3s ease-in-out;
  -webkit-animation: openRose5 3s ease-in-out;
  animation: openRose5 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 2;
  background: #b81b43;
  top: 5px;
  height: 75px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-petals > div:nth-child(6) {
  -moz-animation: openRose6 3s ease-in-out;
  -webkit-animation: openRose6 3s ease-in-out;
  animation: openRose6 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 1;
  background: #c9204b;
  top: "";
  height: "";
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-petals > div:nth-child(7) {
  -moz-animation: openRose7 3s ease-in-out;
  -webkit-animation: openRose7 3s ease-in-out;
  animation: openRose7 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 0;
  background: #c9204b;
  top: "";
  height: "";
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-leaves > div:nth-last-child(1) {
  width: 55px;
  height: 30px;
  background: #338f37;
  position: absolute;
  top: 60px;
  left: 15px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}
.container .rose-leaves > div:nth-child(1) {
  width: 6px;
  height: 230px;
  border: none;
  top: 80px;
  background: #066406;
  left: 40px;
}
.container .thorns > div {
  width: 30px;
  height: 30px;
  background: #066406;
  top: 100px;
  left: 10px;
}
.container .thorns > div:after {
  width: 41px;
  height: 31px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #122139;
  content: "";
  position: absolute;
  left: -12px;
  top: 17px;
}
.container .thorns > div:before {
  width: 41px;
  height: 31px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #122139;
  content: "";
  position: absolute;
  left: -11px;
  top: -11px;
  z-index: 0;
}
.container .thorns > div:nth-child(2) {
  top: 150px;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  left: 45px;
}
.container .thorns > div:nth-child(3) {
  top: 180px;
}
.container .thorns > div:nth-child(4) {
  top: 220px;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  left: 45px;
}
.container .sparkles {
  bottom: -40px;
}
.container .sparkles > div {
  width: 4px;
  height: 4px;
  border-radius: 100px;
  background: #ff96c0;
  box-shadow: 0px 0px 12px 2px #ff4e85;
  bottom: 0;
  opacity: 0;
  -moz-animation: sparkle 4s ease-in-out infinite;
  -webkit-animation: sparkle 4s ease-in-out infinite;
  animation: sparkle 4s ease-in-out infinite;
}
.container .sparkles > div:nth-child(1) {
  left: 0px;
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.container .sparkles > div:nth-child(2) {
  left: 104px;
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.container .sparkles > div:nth-child(3) {
  left: -56px;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.container .sparkles > div:nth-child(4) {
  left: 42px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .sparkles > div:nth-child(5) {
  left: 1px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .sparkles > div:nth-child(6) {
  left: -62px;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.container .sparkles > div:nth-child(7) {
  left: 26px;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.container .sparkles > div:nth-child(8) {
  left: 55px;
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.container .sparkles > div:nth-child(9) {
  left: -26px;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes $animationName {
  50% {
    opacity: 1;
  }
  100% {
    bottom: 250px;
  }
}
@-moz-keyframes sparkle {
  50% {
    opacity: 1;
  }
  100% {
    bottom: 250px;
  }
}
@-ms-keyframes sparkle {
  50% {
    opacity: 1;
  }
  100% {
    bottom: 250px;
  }
}
@keyframes sparkle {
  50% {
    opacity: 1;
  }
  100% {
    bottom: 250px;
  }
}
@-webkit-keyframes $animationName {
  50% {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 80px;
    left: 100px;
  }
  100% {
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    top: 210px;
    left: -30px;
  }
}
@-moz-keyframes openRose2 {
  50% {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 80px;
    left: 100px;
  }
  100% {
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    top: 210px;
    left: -30px;
  }
}
@-ms-keyframes openRose2 {
  50% {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 80px;
    left: 100px;
  }
  100% {
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    top: 210px;
    left: -30px;
  }
}
@keyframes openRose2 {
  50% {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 80px;
    left: 100px;
  }
  100% {
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    top: 210px;
    left: -30px;
  }
}
@-webkit-keyframes $animationName {
  100% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
}
@-moz-keyframes openRose3 {
  100% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
}
@-ms-keyframes openRose3 {
  100% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
}
@keyframes openRose3 {
  100% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
}
@-webkit-keyframes $animationName {
  100% {
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@-moz-keyframes openRose4 {
  100% {
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@-ms-keyframes openRose4 {
  100% {
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@keyframes openRose4 {
  100% {
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@-webkit-keyframes $animationName {
  100% {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@-moz-keyframes openRose5 {
  100% {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@-ms-keyframes openRose5 {
  100% {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@keyframes openRose5 {
  100% {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@-webkit-keyframes $animationName {
  50% {
    box-shadow: 0px 0px 60px #f594b8;
  }
}
@-moz-keyframes glowing {
  50% {
    box-shadow: 0px 0px 60px #f594b8;
  }
}
@-ms-keyframes glowing {
  50% {
    box-shadow: 0px 0px 60px #f594b8;
  }
}
@keyframes glowing {
  50% {
    box-shadow: 0px 0px 60px #f594b8;
  }
}
#theSvg {
  width: 110vmin;
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

text {
  fill: #fda091;
  font-family: consolas;
  font-size: 9px;
}

p {
  position: absolute;
  z-index: 2;
}

label {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: .8;
}

.container1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 97vh;
}
.container1 svg {
  width: 50%;
  height: 50%;
}

.bubbles {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.bubble {
  position: absolute;
  z-index: 200;
  border-radius: 50%;
}
.bubble:nth-child(1) {
  top: 59%;
  left: 12%;
  height: 2vmin;
  width: 2vmin;
  animation: love-burst 6s infinite 0s;
  box-shadow: inset 0 0 0 1vmin #fff;
  transform: translate(0, 0.8em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(2) {
  top: 18%;
  left: 90%;
  height: 7vmin;
  width: 7vmin;
  animation: love-burst 6s infinite 0.15s;
  box-shadow: inset 0 0 0 3.5vmin #fff;
  transform: translate(0, 0.2em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(3) {
  top: 79%;
  left: 41%;
  height: 14vmin;
  width: 14vmin;
  animation: love-burst 6s infinite 0.3s;
  box-shadow: inset 0 0 0 7vmin #fff;
  transform: translate(0, 1.1em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(4) {
  top: 17%;
  left: 57%;
  height: 4vmin;
  width: 4vmin;
  animation: love-burst 6s infinite 0.45s;
  box-shadow: inset 0 0 0 2vmin #fff;
  transform: translate(0, 1.2em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(5) {
  top: 26%;
  left: 87%;
  height: 9vmin;
  width: 9vmin;
  animation: love-burst 6s infinite 0.6s;
  box-shadow: inset 0 0 0 4.5vmin #fff;
  transform: translate(0, 0.05em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(6) {
  top: 27%;
  left: 13%;
  height: 12vmin;
  width: 12vmin;
  animation: love-burst 6s infinite 0.75s;
  box-shadow: inset 0 0 0 6vmin #fff;
  transform: translate(0, 0.65em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(7) {
  top: 9%;
  left: 24%;
  height: 14vmin;
  width: 14vmin;
  animation: love-burst 6s infinite 0.9s;
  box-shadow: inset 0 0 0 7vmin #fff;
  transform: translate(0, 0.9em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(8) {
  top: 69%;
  left: 44%;
  height: 2vmin;
  width: 2vmin;
  animation: love-burst 6s infinite 1.05s;
  box-shadow: inset 0 0 0 1vmin #fff;
  transform: translate(0, 0.9em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(9) {
  top: 54%;
  left: 63%;
  height: 14vmin;
  width: 14vmin;
  animation: love-burst 6s infinite 1.2s;
  box-shadow: inset 0 0 0 7vmin #fff;
  transform: translate(0, 0.6em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(10) {
  top: 76%;
  left: 67%;
  height: 1vmin;
  width: 1vmin;
  animation: love-burst 6s infinite 1.35s;
  box-shadow: inset 0 0 0 0.5vmin #fff;
  transform: translate(0, 1.15em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(11) {
  top: 57%;
  left: 66%;
  height: 9vmin;
  width: 9vmin;
  animation: love-burst 6s infinite 1.5s;
  box-shadow: inset 0 0 0 4.5vmin #fff;
  transform: translate(0, 0.5em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(12) {
  top: 96%;
  left: 31%;
  height: 13vmin;
  width: 13vmin;
  animation: love-burst 6s infinite 1.65s;
  box-shadow: inset 0 0 0 6.5vmin #fff;
  transform: translate(0, 0.85em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(13) {
  top: 61%;
  left: 47%;
  height: 7vmin;
  width: 7vmin;
  animation: love-burst 6s infinite 1.8s;
  box-shadow: inset 0 0 0 3.5vmin #fff;
  transform: translate(0, 1em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(14) {
  top: 57%;
  left: 76%;
  height: 4vmin;
  width: 4vmin;
  animation: love-burst 6s infinite 1.95s;
  box-shadow: inset 0 0 0 2vmin #fff;
  transform: translate(0, 0.6em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(15) {
  top: 92%;
  left: 17%;
  height: 9vmin;
  width: 9vmin;
  animation: love-burst 6s infinite 2.1s;
  box-shadow: inset 0 0 0 4.5vmin #fff;
  transform: translate(0, 0.2em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(16) {
  top: 77%;
  left: 6%;
  height: 7vmin;
  width: 7vmin;
  animation: love-burst 6s infinite 2.25s;
  box-shadow: inset 0 0 0 3.5vmin #fff;
  transform: translate(0, 0.95em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(17) {
  top: 52%;
  left: 47%;
  height: 2vmin;
  width: 2vmin;
  animation: love-burst 6s infinite 2.4s;
  box-shadow: inset 0 0 0 1vmin #fff;
  transform: translate(0, 0.05em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(18) {
  top: 67%;
  left: 7%;
  height: 8vmin;
  width: 8vmin;
  animation: love-burst 6s infinite 2.55s;
  box-shadow: inset 0 0 0 4vmin #fff;
  transform: translate(0, 0.2em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(19) {
  top: 21%;
  left: 7%;
  height: 2vmin;
  width: 2vmin;
  animation: love-burst 6s infinite 2.7s;
  box-shadow: inset 0 0 0 1vmin #fff;
  transform: translate(0, 0.2em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(20) {
  top: 35%;
  left: 13%;
  height: 15vmin;
  width: 15vmin;
  animation: love-burst 6s infinite 2.85s;
  box-shadow: inset 0 0 0 7.5vmin #fff;
  transform: translate(0, 0.7em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(21) {
  top: 87%;
  left: 13%;
  height: 6vmin;
  width: 6vmin;
  animation: love-burst 6s infinite 3s;
  box-shadow: inset 0 0 0 3vmin #fff;
  transform: translate(0, 0.75em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(22) {
  top: 72%;
  left: 59%;
  height: 11vmin;
  width: 11vmin;
  animation: love-burst 6s infinite 3.15s;
  box-shadow: inset 0 0 0 5.5vmin #fff;
  transform: translate(0, 0.8em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(23) {
  top: 70%;
  left: 48%;
  height: 13vmin;
  width: 13vmin;
  animation: love-burst 6s infinite 3.3s;
  box-shadow: inset 0 0 0 6.5vmin #fff;
  transform: translate(0, 0.35em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(24) {
  top: 78%;
  left: 97%;
  height: 3vmin;
  width: 3vmin;
  animation: love-burst 6s infinite 3.45s;
  box-shadow: inset 0 0 0 1.5vmin #fff;
  transform: translate(0, 0.9em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(25) {
  top: 94%;
  left: 81%;
  height: 5vmin;
  width: 5vmin;
  animation: love-burst 6s infinite 3.6s;
  box-shadow: inset 0 0 0 2.5vmin #fff;
  transform: translate(0, 0.8em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(26) {
  top: 76%;
  left: 31%;
  height: 11vmin;
  width: 11vmin;
  animation: love-burst 6s infinite 3.75s;
  box-shadow: inset 0 0 0 5.5vmin #fff;
  transform: translate(0, 0.9em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(27) {
  top: 89%;
  left: 80%;
  height: 11vmin;
  width: 11vmin;
  animation: love-burst 6s infinite 3.9s;
  box-shadow: inset 0 0 0 5.5vmin #fff;
  transform: translate(0, 1.25em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(28) {
  top: 98%;
  left: 42%;
  height: 1vmin;
  width: 1vmin;
  animation: love-burst 6s infinite 4.05s;
  box-shadow: inset 0 0 0 0.5vmin #fff;
  transform: translate(0, 0.65em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(29) {
  top: 60%;
  left: 73%;
  height: 7vmin;
  width: 7vmin;
  animation: love-burst 6s infinite 4.2s;
  box-shadow: inset 0 0 0 3.5vmin #fff;
  transform: translate(0, 0.65em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(30) {
  top: 79%;
  left: 8%;
  height: 3vmin;
  width: 3vmin;
  animation: love-burst 6s infinite 4.35s;
  box-shadow: inset 0 0 0 1.5vmin #fff;
  transform: translate(0, 0.85em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(31) {
  top: 8%;
  left: 15%;
  height: 5vmin;
  width: 5vmin;
  animation: love-burst 6s infinite 4.5s;
  box-shadow: inset 0 0 0 2.5vmin #fff;
  transform: translate(0, 1.1em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(32) {
  top: 4%;
  left: 71%;
  height: 7vmin;
  width: 7vmin;
  animation: love-burst 6s infinite 4.65s;
  box-shadow: inset 0 0 0 3.5vmin #fff;
  transform: translate(0, 0.55em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(33) {
  top: 24%;
  left: 91%;
  height: 4vmin;
  width: 4vmin;
  animation: love-burst 6s infinite 4.8s;
  box-shadow: inset 0 0 0 2vmin #fff;
  transform: translate(0, 0.1em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(34) {
  top: 16%;
  left: 32%;
  height: 14vmin;
  width: 14vmin;
  animation: love-burst 6s infinite 4.95s;
  box-shadow: inset 0 0 0 7vmin #fff;
  transform: translate(0, 0.1em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(35) {
  top: 82%;
  left: 18%;
  height: 10vmin;
  width: 10vmin;
  animation: love-burst 6s infinite 5.1s;
  box-shadow: inset 0 0 0 5vmin #fff;
  transform: translate(0, 1.1em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(36) {
  top: 29%;
  left: 71%;
  height: 2vmin;
  width: 2vmin;
  animation: love-burst 6s infinite 5.25s;
  box-shadow: inset 0 0 0 1vmin #fff;
  transform: translate(0, 0.05em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(37) {
  top: 72%;
  left: 48%;
  height: 7vmin;
  width: 7vmin;
  animation: love-burst 6s infinite 5.4s;
  box-shadow: inset 0 0 0 3.5vmin #fff;
  transform: translate(0, 1.15em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(38) {
  top: 94%;
  left: 88%;
  height: 3vmin;
  width: 3vmin;
  animation: love-burst 6s infinite 5.55s;
  box-shadow: inset 0 0 0 1.5vmin #fff;
  transform: translate(0, 0.8em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(39) {
  top: 32%;
  left: 64%;
  height: 3vmin;
  width: 3vmin;
  animation: love-burst 6s infinite 5.7s;
  box-shadow: inset 0 0 0 1.5vmin #fff;
  transform: translate(0, 0.45em) scale(0);
  transform-origin: center bottom;
}
.bubble:nth-child(40) {
  top: 67%;
  left: 75%;
  height: 2vmin;
  width: 2vmin;
  animation: love-burst 6s infinite 5.85s;
  box-shadow: inset 0 0 0 1vmin #fff;
  transform: translate(0, 0.9em) scale(0);
  transform-origin: center bottom;
}

@keyframes love-burst {
  50%,
    100% {
    box-shadow: inset 0 0 0 0 red;
    transform: translate(0, 0) scale(1);
  }
}
.heart {
  fill: #fff;
  opacity: 0;
}
.bubble:nth-child(1) .heart {
  animation: love 6s forwards infinite 0s;
  transform: scale(0.5) rotate(-30deg);
}
.bubble:nth-child(2) .heart {
  animation: love 6s forwards infinite 0.15s;
  transform: scale(0.5) rotate(34deg);
}
.bubble:nth-child(3) .heart {
  animation: love 6s forwards infinite 0.3s;
  transform: scale(0.5) rotate(-22deg);
}
.bubble:nth-child(4) .heart {
  animation: love 6s forwards infinite 0.45s;
  transform: scale(0.5) rotate(10deg);
}
.bubble:nth-child(5) .heart {
  animation: love 6s forwards infinite 0.6s;
  transform: scale(0.5) rotate(-28deg);
}
.bubble:nth-child(6) .heart {
  animation: love 6s forwards infinite 0.75s;
  transform: scale(0.5) rotate(18deg);
}
.bubble:nth-child(7) .heart {
  animation: love 6s forwards infinite 0.9s;
  transform: scale(0.5) rotate(-1deg);
}
.bubble:nth-child(8) .heart {
  animation: love 6s forwards infinite 1.05s;
  transform: scale(0.5) rotate(14deg);
}
.bubble:nth-child(9) .heart {
  animation: love 6s forwards infinite 1.2s;
  transform: scale(0.5) rotate(-33deg);
}
.bubble:nth-child(10) .heart {
  animation: love 6s forwards infinite 1.35s;
  transform: scale(0.5) rotate(32deg);
}
.bubble:nth-child(11) .heart {
  animation: love 6s forwards infinite 1.5s;
  transform: scale(0.5) rotate(-14deg);
}
.bubble:nth-child(12) .heart {
  animation: love 6s forwards infinite 1.65s;
  transform: scale(0.5) rotate(40deg);
}
.bubble:nth-child(13) .heart {
  animation: love 6s forwards infinite 1.8s;
  transform: scale(0.5) rotate(-23deg);
}
.bubble:nth-child(14) .heart {
  animation: love 6s forwards infinite 1.95s;
  transform: scale(0.5) rotate(31deg);
}
.bubble:nth-child(15) .heart {
  animation: love 6s forwards infinite 2.1s;
  transform: scale(0.5) rotate(-32deg);
}
.bubble:nth-child(16) .heart {
  animation: love 6s forwards infinite 2.25s;
  transform: scale(0.5) rotate(32deg);
}
.bubble:nth-child(17) .heart {
  animation: love 6s forwards infinite 2.4s;
  transform: scale(0.5) rotate(-29deg);
}
.bubble:nth-child(18) .heart {
  animation: love 6s forwards infinite 2.55s;
  transform: scale(0.5) rotate(11deg);
}
.bubble:nth-child(19) .heart {
  animation: love 6s forwards infinite 2.7s;
  transform: scale(0.5) rotate(-18deg);
}
.bubble:nth-child(20) .heart {
  animation: love 6s forwards infinite 2.85s;
  transform: scale(0.5) rotate(42deg);
}
.bubble:nth-child(21) .heart {
  animation: love 6s forwards infinite 3s;
  transform: scale(0.5) rotate(-33deg);
}
.bubble:nth-child(22) .heart {
  animation: love 6s forwards infinite 3.15s;
  transform: scale(0.5) rotate(42deg);
}
.bubble:nth-child(23) .heart {
  animation: love 6s forwards infinite 3.3s;
  transform: scale(0.5) rotate(-13deg);
}
.bubble:nth-child(24) .heart {
  animation: love 6s forwards infinite 3.45s;
  transform: scale(0.5) rotate(37deg);
}
.bubble:nth-child(25) .heart {
  animation: love 6s forwards infinite 3.6s;
  transform: scale(0.5) rotate(-1deg);
}
.bubble:nth-child(26) .heart {
  animation: love 6s forwards infinite 3.75s;
  transform: scale(0.5) rotate(13deg);
}
.bubble:nth-child(27) .heart {
  animation: love 6s forwards infinite 3.9s;
  transform: scale(0.5) rotate(-24deg);
}
.bubble:nth-child(28) .heart {
  animation: love 6s forwards infinite 4.05s;
  transform: scale(0.5) rotate(43deg);
}
.bubble:nth-child(29) .heart {
  animation: love 6s forwards infinite 4.2s;
  transform: scale(0.5) rotate(-3deg);
}
.bubble:nth-child(30) .heart {
  animation: love 6s forwards infinite 4.35s;
  transform: scale(0.5) rotate(29deg);
}
.bubble:nth-child(31) .heart {
  animation: love 6s forwards infinite 4.5s;
  transform: scale(0.5) rotate(-16deg);
}
.bubble:nth-child(32) .heart {
  animation: love 6s forwards infinite 4.65s;
  transform: scale(0.5) rotate(50deg);
}
.bubble:nth-child(33) .heart {
  animation: love 6s forwards infinite 4.8s;
  transform: scale(0.5) rotate(-34deg);
}
.bubble:nth-child(34) .heart {
  animation: love 6s forwards infinite 4.95s;
  transform: scale(0.5) rotate(7deg);
}
.bubble:nth-child(35) .heart {
  animation: love 6s forwards infinite 5.1s;
  transform: scale(0.5) rotate(-27deg);
}
.bubble:nth-child(36) .heart {
  animation: love 6s forwards infinite 5.25s;
  transform: scale(0.5) rotate(37deg);
}
.bubble:nth-child(37) .heart {
  animation: love 6s forwards infinite 5.4s;
  transform: scale(0.5) rotate(-10deg);
}
.bubble:nth-child(38) .heart {
  animation: love 6s forwards infinite 5.55s;
  transform: scale(0.5) rotate(21deg);
}
.bubble:nth-child(39) .heart {
  animation: love 6s forwards infinite 5.7s;
  transform: scale(0.5) rotate(-10deg);
}
.bubble:nth-child(40) .heart {
  animation: love 6s forwards infinite 5.85s;
  transform: scale(0.5) rotate(1deg);
}

@keyframes love {
  50% {
    fill: red;
    opacity: 1;
  }
}

let rid = null; // request animation id
const SVG_NS = "http://www.w3.org/2000/svg";
const pathlength = shape.getTotalLength();

let t = 0; // at the begining of the path
let lengthAtT = pathlength * t;

let d = shape.getAttribute("d");

// 1. build the d array
let n = d.match(/C/gi).length; // how many times

let pos = 0; // the position, used to find the indexOf the nth C

class subPath {
  constructor(d) {
    this.d = d;
    this.get_PointsRy();
    this.previous = subpaths.length > 0 ? subpaths[subpaths.length - 1] : null;
    this.measurePath();
    this.get_M_Point(); //lastPoint
    this.lastCubicBezier;
    this.get_lastCubicBezier();
  }

get_PointsRy() {
    this.pointsRy = [];
    let temp = this.d.split(/[A-Z,a-z\s,]/).filter(v => v); // remove empty elements
    temp.map(item => {
      this.pointsRy.push(parseFloat(item));
    }); //this.pointsRy numbers not strings
  }

measurePath() {
    let path = document.createElementNS(SVG_NS, "path");
    path.setAttributeNS(null, "d", this.d);
    // no need to append it to the SVG
    // the lengths of every path in dry
    this.pathLength = path.getTotalLength();
  }

get_M_Point() {
    if (this.previous) {
      let p = this.previous.pointsRy;
      let l = p.length;
      this.M_point = [p[l - 2], p[l - 1]];
    } else {
      let p = this.pointsRy;
      this.M_point = [p[0], p[1]];
    }
  }

get_lastCubicBezier() {
    let lastIndexOfC = this.d.lastIndexOf("C");
    let temp = this.d
    .substring(lastIndexOfC + 1)
    .split(/[\s,]/)
    .filter(v => v);
    let _temp = [];
    temp.map(item => {
      _temp.push(parseFloat(item));
    });
    this.lastCubicBezier = [this.M_point];
    for (let i = 0; i < _temp.length; i += 2) {
      this.lastCubicBezier.push(_temp.slice(i, i + 2));
    }
  }
}

let subpaths = [];

// create new subPaths
for (let i = 0; i < n; i++) {
  // finds the of nth C in d
  let newpos = d.indexOf("C", pos + 1);
  if (i > 0) {
    // if it's not the first C
    let sPath = new subPath(d.substring(0, newpos));
    subpaths.push(sPath);
  }
  //change the value of the position pos
  pos = newpos;
}
// at the end add d to the subpaths array
subpaths.push(new subPath(d));

// 2. get the index of the bezierLengths where the point at t is
let index;
for (index = 0; index < subpaths.length; index++) {
  if (subpaths[index].pathLength >= lengthAtT) {
    break;
  }
}

let T = get_T(t, index);

let newPoints = getBezierPoints(T, subpaths[index].lastCubicBezier);

drawCBezier(newPoints, partialPath, index);

function getBezierPoints(t, points) {
  let helperPoints = [];

// helper points 0,1,2
  for (let i = 1; i < 4; i++) {
    //points.length must be 4 !!!
    let p = lerp(points[i - 1], points[i], t);
    helperPoints.push(p);
  }

// helper points 3,4
  helperPoints.push(lerp(helperPoints[0], helperPoints[1], t));
  helperPoints.push(lerp(helperPoints[1], helperPoints[2], t));

// helper point 5 is where the first Bézier ends and where the second Bézier begins
  helperPoints.push(lerp(helperPoints[3], helperPoints[4], t));

// points for the dynamic bézier
  let firstBezier = [
    points[0],
    helperPoints[0],
    helperPoints[3],
    helperPoints[5]
  ];
  //console.log(firstBezier)
  return firstBezier;
}

function lerp(A, B, t) {
  // a virtual line from A to B
  // get the position of a point on this line
  // if(t == .5) the point in in the center of the line
  // 0 <= t <= 1
  let ry = [
    (B[0] - A[0]) * t + A[0], //x
    (B[1] - A[1]) * t + A[1] //y
  ];
  return ry;
}

function drawCBezier(points, path, index) {
  let d;

if (index > 0) {
    d = subpaths[index].previous.d;
  } else {
    d = `M${points[0][0]},${points[0][1]} C`;
  }

// points.length == 4
  for (let i = 1; i < 4; i++) {
    d += ` ${points[i][0]},${points[i][1]} `;
  }
  //console.log(d)
  partialPath.setAttributeNS(null, "d", d);
}

/*
_t.addEventListener("input", ()=>{
  t = _t.value;
  lengthAtT = pathlength*t;
  for(index = 0; index < subpaths.length; index++){
if(subpaths[index].pathLength >= lengthAtT){break; }  
}
  T = get_T(t, index); 
  newPoints = getBezierPoints(T,subpaths[index].lastCubicBezier);
  drawCBezier(newPoints, partialPath, index);
})*/

t = 0.005;
function Typing() {
  rid = window.requestAnimationFrame(Typing);
  if (t >= 1) {
    window.cancelAnimationFrame(rid);
    rid = null;
  } else {
    t += 0.005;
  }

lengthAtT = pathlength * t;
  for (index = 0; index < subpaths.length; index++) {
    if (subpaths[index].pathLength >= lengthAtT) {
      break;
    }
  }
  T = get_T(t, index);
  newPoints = getBezierPoints(T, subpaths[index].lastCubicBezier);
  drawCBezier(newPoints, partialPath, index);
}

// Typing();
theSvg.addEventListener("click", () => {
  if (rid) {
    window.cancelAnimationFrame(rid);
    rid = null;
  } else {
    if (t >= 1) {
      t = 0.025;
    }
    rid = window.requestAnimationFrame(Typing);
  }
	
});
document.addEventListener('click', () => {

let get = document.getElementById('ct1');

if (!get.contains(event.target)) {

get.style.display = 'none';

}
	let get1 = document.getElementById('ct');

if (!get1.contains(event.target)) {

get1.style.display = 'block';

}
	document.body.style.background = "#122139";
});
var leafOne = document.querySelector('.leafOne');
var stickLine = document.querySelector('.stickLine');
var leafTwo = document.querySelector('.leafTwo');
var leafS1 = document.querySelector('.leafS1');
var rose1 = document.querySelector('.rose1');
var rose2 = document.querySelector('.rose2');
var rose3 = document.querySelector('.rose3');
var rose4 = document.querySelector('.rose4');

Frontend Forever App